<template>
	<div v-waterMarker class="merak-float" v-loading="loading">
		<div class="header">
			<div class="leftTitle">
				<div class="title">#{{props.title[0]}} <span>{{props.title[1]}}</span></div>
			</div>
			<div class="btnBoxs">
				<!-- <el-button plain @click="emit('close',state.refresh,props.typeId)">{{$t('merak.cancel')}}</el-button>
				<el-button type="primary" plain
					@click="submitForm(ruleFormRef,true)">{{ $t("merak.save_continue") }}</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef,false)">{{ $t("merak.save") }}</el-button> -->
				<div class="icon" @click="emit('close')">
					<el-icon size="20">
						<Close />
					</el-icon>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="merak-float-overflow-y">
				<el-tabs v-model="activeName" class="demo-tabs">
				    <el-tab-pane 
						:label="$t('marking_application_form.outter_mark')+`（${tableAllList.list.length}）`" 
						name="first"
						:style="{ left: activeName === 'first' ? '0' : '-100%' , zIndex: activeName === 'first' ? '0' : '-1'}">
					
						<MerakXTable :data="tableAllList.list" ref="GTINTable" :showHeader="false" :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
							:query-columns="handleQueryColumns">
						</MerakXTable>
					</el-tab-pane>
				    <el-tab-pane 
					:label="$t('marking_application_form.inner_box')+`（${tableAllList.listInner.length}）`" 
					name="second"
					:style="{ left: activeName === 'second' ? '0' : '-100%' , zIndex: activeName === 'second' ? '0' : '-1'}">
						
						<MerakXTable :data="tableAllList.listInner" ref="GTINTableInner" :showHeader="false" :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
							:query-columns="handleQueryColumns">
						</MerakXTable>
						
					</el-tab-pane>
				  </el-tabs>
				
				<!-- <el-menu
				    :default-active="activeIndex"
				    class="el-menu-demo"
				    mode="horizontal"
				    @select="handleSelect"
				  >
				    <el-menu-item index="1">{{}}（{{tableAllList.list.length}}）</el-menu-item>
				    <el-menu-item index="2">{{}}（{{tableAllList.listInner.length}}）</el-menu-item>
				</el-menu> -->
				
				
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { nextTick, getCurrentInstance, ref, reactive, computed, watch, onMounted } from "vue";
	import { gtinTableField, gtinTablelist } from "@/api/modules/markingManagement/applicationFromList";
	import { failMsg, successMsg } from "@/utils/messageUtils";
	import MerakXTable, {
		MerakXTableInstance,
		MerakXTableProps
	} from "@/components/MerakXTable";
	const state = reactive<{
		params : Record<string, any>;
		columns : MerakXTableColumn[];
	}>({
		params: {},
		columns: []
	});
	const { proxy } = getCurrentInstance()!;
	const props = defineProps<{
		i_id ?: string | number;
		a_id ?: string | number;
		title ?: any;
	}>();
	const tableList = ref([]);
	const tableAllList = ref({
		list:[],
		listInner:[],
	});
	const loading = ref(true);
	
	
	const emit = defineEmits<{
		close : [refresh: boolean];
	}>();
	const activeName = ref('first')
	
	//表头信息
	const handleQueryColumns : MerakXTableInstance["queryColumns"] = async () => {
		return await gtinTableField().then(res => {
			if (res.code == ResultEnum.SUCCESS) {
				let data = res.data as MerakXTableQuery.Columns;
				state.columns = data.columns;
	
				return data;
			}
		});
	};
	//列表内容展示区
	const handleQueryData : MerakXTableInstance["queryData"] = async () => {
		const params : Record<string, any> = {};
		params.import_company_id = props.i_id;
		params.apply_order_id = props.a_id;
		// if (!!page) {
		// 	Object.assign(params, { ...page }, from);
		// }
		return await gtinTablelist(params).then(res => {
			if (res.code == ResultEnum.SUCCESS) {
				let data = res.data;
	
				const { table_data } = data;
				tableAllList.value = table_data;
				// if(activeIndex.value == 1){
				// 	tableList.value = table_data.list 
				// } else {
				// 	tableList.value = table_data.listInner 
				// }
				loading.value = false;
			}
		});
	};


	onMounted(async () => {
		handleQueryData()
	})
</script>

<style type="text/css" scoped>
	@import "./GTINDetail.scss";
</style>